<template>
    <div class = "params">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理

        </el-breadcrumb-item>
        <el-breadcrumb-item>分类参数

        </el-breadcrumb-item>
    </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 头部警告区域 -->
            <el-alert
                :closable = "false"
                show-icon title = "注意：只允许为第三级分类设置相关参数！" type = "warning">
            </el-alert>
            <!-- 选择商品分类 -->
            <el-row class = "cat_opt">
                <el-col>
                    <span>选择商品分类：</span>
                    <!-- 选择商品分类 -->
                    <el-cascader ref = "cascader" v-model = "selectCateKeys"
                                 :options = "cateList"
                                 :props = "{
                                  expandTrigger: 'hover',
                                  label :'cat_name',
                                  value: 'cat_id',
                                  children:'children' }"
                                 clearable
                                 style = "width: 18%;"
                                 @change = "handleChange">
                        <!-- checkStrictly: true, -->
                    </el-cascader>
                </el-col>
            </el-row>
            <!-- tab 页签区域 -->
            <el-tabs v-model = "activeName" @tab-click = "handleTabClick">
                <!-- 添加动态参数 -->
                <el-tab-pane label = "动态参数" name = "many">
                    <AddParaMeter ref = "addparameter" :activeName = "activeName"
                                  :cateId = "cateId"
                                  :isBtnDisabled = "isBtnDisabled"
                                  :manyTableData = "manyTableData"
                                  @getParamsData = "getParamsData"
                                  @openAdd = "openAdd"></AddParaMeter>
                </el-tab-pane>
                <!-- 添加静态属性 -->
                <el-tab-pane label = "静态属性" name = "only">
                    <AddAttriBute ref = "addattribute" :activeName = "activeName"
                                  :cateId = "cateId"
                                  :isBtnDisabled = "isBtnDisabled"
                                  :onlyTableData = "onlyTableData"
                                  @getParamsData = "getParamsData"
                                  @openAdd = "openAdd"></AddAttriBute>
                </el-tab-pane>
            </el-tabs>
        </el-card>
        <!--添加动态属性或 静态参数对话框-->
        <Add ref = "add" :activeName = "activeName" :cateId = "cateId"
             :row = "row" @getParamsData = "getParamsData"></Add>
    </div>
</template>

<script>
import Add from "@/views/goods/Add.vue";
import AddAttriBute from '@/views/goods/attribute/AddAttriBute.vue';
import AddParaMeter from '@/views/goods/paramater/AddParaMeter.vue';

export default {
    name: 'VueShopParams',
    components: {Add, AddParaMeter, AddAttriBute},
    data () {
        return {
            row: {},
            // 被激活的页签名称
            activeName: "many",
            cateList: [],
            // 级联选择框双向绑定到的数据
            selectCateKeys: [],
            // 动态参数数据
            manyTableData: [],
            // 静态参数数据
            onlyTableData: [],
        };
    },
    watch: {
        selectCateKeys (value) {
            if (value.length === 0) {
                this.onlyTableData = [];
                this.manyTableData = [];
            }
        }
    },
    computed: {
        // 返回 true 按钮禁用，false 启用
        isBtnDisabled () {
            if (this.selectCateKeys.length !== 3) {
                return true;
            }
            return false;
        },
        // 当前选中的三级分类的id
        cateId () {
            if (this.selectCateKeys.length === 3) {
                return this.selectCateKeys[2];
            }
            return null;
        }
    },
    created () {
        this.getCateList();
    },
    methods: {
        /**
         * @name openAdd()
         * @desc 动态展示添加对话框
         */
        openAdd () {
            this.$refs.add.addDialogVisible = true;
        },
        /**
         * @name handleTabClick()
         * @desc tab页签点击事件
         */
        handleTabClick () {
            this.getParamsData();
            this.$refs.addparameter.show = !this.$refs.addparameter.show;
            this.$refs.addattribute.show = !this.$refs.addattribute.show;
        },
        /**
         * @name getCateList()
         * @desc 获取所有商品分类
         */
        async getCateList () {
            const {data: res} = await this.$http.get('categories');
            if (res.meta.status !== 200) {
                return this.$message.error('获取商品分类失败')
            }
            this.cateList = res.data;
        },
        /**
         * @name handleChange()
         * @desc 级联选择框变化会触发
         */
        handleChange () {
            this.getParamsData();
        },
        /**
         * @name getParamsData()
         * @desc 获取参数列表数据
         */
        async getParamsData () {
            // 证明选中的不是三级分类
            if (this.selectCateKeys.length !== 3) {
                this.selectCateKeys = [];
                return;
            }
            // 根据所选分类id，和当前所处的面板，获取对应参数
            const {data: res} = await this.$http.get(`categories/${this.cateId}/attributes`,
                {params: {sel: this.activeName}});
            if (res.meta.status !== 200) {
                return this.$message.error("获取参数列表失败");
            }

            // 遍历每一项
            res.data.forEach(item => {
                item.attr_vals = item.attr_vals ?
                    item.attr_vals = item.attr_vals.split(' ') : [];
                // 控制文本框显示与隐藏
                item.inputVisible = false;
                // 文本框值
                item.inputValue = ''
            })
            if (this.activeName === "many") {
                this.manyTableData = res.data;
            } else {
                this.onlyTableData = res.data;
            }
        }
    },
};
</script>

<style lang = "less" scoped>
.cat_opt {
    margin: 15px 0;
}
</style>
